// 费用应用
<template>
  <div>
    <a-spin tip="Loading..." :spinning="spinning">
      <div style="margin: 15px 0">
        <a-button type="primary" @click="addScheme">新增规则</a-button>
      </div>
      <a-table :data-source="tabData" :pagination="false">
        <a-table-column
          key="schemeName"
          data-index="schemeName"
          align="center"
          width="19%"
        >
          <span slot="title">方案名称</span>
          <template slot-scope="text, record">
            {{ record.schemeName }}
          </template>
        </a-table-column>
        <a-table-column
          key="isDisable"
          data-index="isDisable"
          align="center"
          width="18%"
        >
          <span slot="title">是否启动</span>
          <template slot-scope="text, record">
            <a-switch
              :checked="record.isDisable == '0' ? true : false"
              @change="(e) => onChangeIsDisable(e, record)"
            />
          </template>
        </a-table-column>
        <a-table-column
          key="advanceRatio"
          data-index="advanceRatio"
          align="center"
          width="18%"
        >
          <span slot="title">清关垫付手续费百分百比</span>
          <template slot-scope="text, record">
            {{ (record.advanceRatio || "0") + "%" }}
          </template>
        </a-table-column>
        <a-table-column
          key="advance"
          data-index="advance"
          align="center"
          width="18%"
        >
          <span slot="title">手续费范围</span>
          <template slot-scope="text, record">
            {{
              (record.advanceLeft == null ? "/" : record.advanceLeft) +
              (record.advanceLeft == null && record.advanceRight == null
                ? ""
                : "~") +
              (record.advanceRight == null ? "/" : record.advanceRight)
            }}
          </template>
        </a-table-column>
        <a-table-column
          key="remarks"
          data-index="remarks"
          align="center"
          width="18%"
        >
          <span slot="title">备注</span>
          <template slot-scope="text, record">
            {{ record.remarks }}
          </template>
        </a-table-column>
        <a-table-column key="operation" data-index="operation" align="center">
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="eidtScheme(record)"
              >编辑</a
            >
            <!-- <a-divider type="vertical" />
            <a-popconfirm
              title="是否要删除?"
              ok-text="是"
              cancel-text="取消"
              @confirm="e => onDelete(e, record)"
            >
              <a
                href="javascript:;"
                style="color:#f00;border-bottom:1px solid #f00;"
                >删除</a
              >
            </a-popconfirm> -->
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <SetCostModal v-if="flag" @delModal="delModal" :getTabList="getTabList" />
  </div>
</template>

<script>
import SetCostModal from "./SetCostModal";
import {
  cost_searchTabList,
  cost_editSheme,
} from "@/apis/system/setManage/setRules";
export default {
  components: {
    SetCostModal,
  },
  data() {
    return {
      flag: true,
      //表格数据
      tabData: [],
      spinning: false,
      //搜索数据
      searchData: {
        size: 10,
        current: 1,
      },
      total: 5,
    };
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    //是否启用
    async onChangeIsDisable(e, record) {
      if (e) {
        let res = await cost_editSheme(record.sysChargingSchemeId, {
          isDisable: 0,
        });
        if (res.code == "10000") {
          record.isDisable = "0";
          this.getTabList();
        }
      } else {
        let res = await cost_editSheme(record.sysChargingSchemeId, {
          isDisable: 1,
        });
        if (res.code == "10000") {
          record.isDisable = "1";
          this.getTabList();
        }
      }
    },
    //查看规则
    eidtScheme(record) {
      this.flag = true;
      setTimeout(() => {
        this.$bus.$emit("editScheme", true, record, "edit");
      }, 50);
    },
    //删除规则
    onDelete(e, record) {
      console.log(record);
    },
    //新增规则
    addScheme() {
      this.flag = true;
      setTimeout(() => {
        this.$bus.$emit("addScheme", true);
      }, 50);
    },
    //销毁子组件
    delModal() {
      setTimeout(() => {
        this.flag = false;
      }, 50);
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.size = size * 1;
      this.searchData.current = current * 1;
      this.getTabList();
    },
    //查询表格数据
    async getTabList() {
      this.spinning = true;
      let res = await cost_searchTabList(this.searchData);
      if (res.code == "200") {
        this.tabData = res.responseBody.records;
        this.searchData.size = res.responseBody.size * 1;
        this.total = res.responseBody.total * 1;
        this.spinning = false;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
